<template>
  <h3>icon 组件示例</h3>
  <f-icon name="caret-right" class="fs24" />
  <f-tag color="#f50">#f50</f-tag>
  <f-button>
    <template #icon><f-icon name="CodeSandbox" /></template>
    图标
  </f-button>
  <f-button>
    <template #icon><f-icon name="QQ" /></template>
    图标
  </f-button>

  <f-input>
    <template #prefix>
      <f-icon name="USB" />
    </template>
  </f-input>

  <f-input v-model:value="searchIcon">
    <template #suffix>
      <f-icon name="search" />
    </template>
  </f-input>

  <div v-if="directionIcons.length">
    <h3>方向图标</h3>
    <div class="flex flex-wrap">
      <div v-for="icon in directionIcons" :key="icon" class="w120 tc b br6 pt10 pb10 mb10 mr10" >
        <f-icon :name="icon" class="fs24" />
        <span class="db pt5">{{ icon }}</span>
      </div>
    </div>
  </div>

  <div v-if="promptIcons.length">
    <h3>提示图标</h3>
    <div class="flex flex-wrap">
      <div v-for="icon in promptIcons" :key="icon" class="w120 tc b br6 pt10 pb10 mb10 mr10" >
        <f-icon :name="icon" class="fs24" />
        <span class="db pt5">{{ icon }}</span>
      </div>
    </div>
  </div>

  <div v-if="editIcons.length">
    <h3>编辑图标</h3>
    <div class="flex flex-wrap">
      <div v-for="icon in editIcons" :key="icon" class="w120 tc b br6 pt10 pb10 mb10 mr10" >
        <f-icon :name="icon" class="fs24" />
        <span class="db pt5">{{ icon }}</span>
      </div>
    </div>
  </div>

  <div v-if="chartIcons.length">
    <h3>数据图标</h3>
    <div class="flex flex-wrap">
      <div v-for="icon in chartIcons" :key="icon" class="w120 tc b br6 pt10 pb10 mb10 mr10" >
        <f-icon :name="icon" class="fs24" />
        <span class="db pt5">{{ icon }}</span>
      </div>
    </div>
  </div>

  <div v-if="brandIcons.length">
    <h3>品牌图标</h3>
    <div class="flex flex-wrap">
      <div v-for="icon in brandIcons" :key="icon" class="w120 tc b br6 pt10 pb10 mb10 mr10" >
        <f-icon :name="icon" class="fs24" />
        <span class="db pt5">{{ icon }}</span>
      </div>
    </div>
  </div>

  <div v-if="fileIcons.length">
    <h3>文件图标</h3>
    <div class="flex flex-wrap">
      <div v-for="icon in fileIcons" :key="icon" class="w120 tc b br6 pt10 pb10 mb10 mr10" >
        <f-icon :name="icon" class="fs24" />
        <span class="db pt5">{{ icon }}</span>
      </div>
    </div>
  </div>

  <h3>全部图标</h3>
  <div class="flex flex-wrap">
    <div
      v-for="icon in icons"
      :key="icon"
      class="w120 tc b br6 pt10 pb10 mb10 mr10"
    >
      <f-icon :name="icon" class="fs24" />
      <span class="db pt5">{{ icon }}</span>
    </div>
  </div>
</template>


<script setup>
import { ref, computed } from 'vue'

const searchIcon = ref(null);

const directionIcons = computed(() => [
  "arrowdown",
  "arrowleft",
  "arrowright",
  "arrowup",
  "arrawsalt",
  "shrink",
  "caret-down",
  "caret-left",
  "caret-right",
  "caret-up",
  "doubleleft",
  "doubleright",
  "fullscreen",
  "fullscreen-exit",
  "indent",
  "outdent",
  "login",
  "logout",
  "radius-bottomleft",
  "radius-bottomright",
  "radius-setting",
  "radius-upleft",
  "radius-upright",
  "backward",
  "step-backward",
  "step-forward",
  "fast-backward",
  "fast-forward",
  "swap",
  "swap-left",
  "swap-right",
  "vertical-align-botto",
  "vertical-align-middl",
  "vertical-align-top",
  "verticalleft",
  "verticalright",
  "Import",
  "border",
  "border-outer",
  "border-bottom",
  "border-horizontal",
  "border-verticle",
  "border-inner",
  "border-left",
  "border-right",
  "border-top",
  "up",
  "left",
  "down",
  "right",
  // "",
].filter(f => searchIcon.value ? f.indexOf(searchIcon.value) !== -1 : true ));

const promptIcons = computed(() => [
  "question",
  "plus",
  "pause",
  "minus",
  "infomation",
  "close",
  "check",
  "stop",
].filter(f => searchIcon.value ? f.indexOf(searchIcon.value) !== -1 : true ))

const editIcons = computed(() => [
  "edit",
  "delete",
  "detail",
  "deletecolumn",
  "deleterow",
  "align-center",
  "align-left",
  "align-right",
  "bold",
  "bg-colors",
  "highlight",
  "sort-ascending",
  "sort-descending",
  "ellipsis",
  "font-colors",
  "font-size",
].filter(f => searchIcon.value ? f.indexOf(searchIcon.value) !== -1 : true ))

const chartIcons = computed(() => [
  "piechart",
  "boxplot",
  "dashboard",
  "deploymentunit",
  "heatmap",
  "index",
  "linechart",
  "radarchart",
].filter(f => searchIcon.value ? f.indexOf(searchIcon.value) !== -1 : true ))

const brandIcons = computed(() => [
  "android",
  "windows",
  "IE",
  "chrome",
  "CodeSandbox",
  "Console-SQL",
  "GIF",
  "Function",
  "Gitlab",
  "HTML",
  "QQ",
  "Youtube",
  "alibaba",
  "alipay",
  "aliwangwang",
  "amazon",
  "ant-cloud",
  "antdesign",
  "apple",
  "behance",
  "codepen",
  "dingtalk",
  "dropbox",
  "earth",
  "dribbble",
  "facebook",
  "google",
  "googleplus",
  "medium",
  "reddit",
  "skype",
  "slack",
  "taobao",
  "twitter",
  "weibo",
  "yahoo",
  "yuque",
  "zhihu",
].filter(f => searchIcon.value ? f.indexOf(searchIcon.value) !== -1 : true ))

const fileIcons = computed(() => [
  "audit",
  "diff",
  "file",
  "file-GIF",
  "file-add",
  "file-copy",
  "file-excel",
  "file-exception",
  "file-exclamation",
  "file-image",
  "file-markdown",
  "file-pdf",
  "file-ppt",
  "file-text",
  "file-unknown",
  "file-word",
  "file-zip",
  "filedone",
  "fileprotect",
  "filesearch",
  "filesync",
  "folder",
  "folder-add",
  "folder-open",
  "folder-view",
  "idcard",
  "image",
].filter(f => searchIcon.value ? f.indexOf(searchIcon.value) !== -1 : true ))

const icons = computed(() => [
  "play-circle-fill",
  "clear",
  "Pound-circle-fill",
  "collapse",
  "smile-fill",
  "expand",
  "stop-fill",
  "deletecolumn",
  "warning-circle-fill",
  "merge-cells",
  "CI",
  "time-circle-fill",
  "subnode",
  "Dollar",
  "trademark-circle-fil",
  "rotate-left",
  "compass",
  "YUAN-circle-fill",
  "rotate-right",
  "frown",
  "heart-fill",
  "insertrowbelow",
  "left-circle",
  "piechart-circle-fil",
  "insertrowabove",
  "down-circle",
  "dashboard-fill",
  "table1",
  "EURO",
  "message-fill",
  "solit-cells",
  "copyright",
  "check-square-fill",
  "formatpainter",
  "minus-circle",
  "down-square-fill",
  "insertrowright",
  "meh",
  "minus-square-fill",
  "formatpainter-fill",
  "Pound",
  "close-square-fill",
  "insertrowleft",
  "right-circle",
  "codelibrary-fill",
  "translate",
  "smile",
  "left-square-fill",
  "deleterow",
  "trademark",
  "play-square-fill",
  "sisternode",
  "earth",
  "up-square-fill",
  "Field-number",
  "YUAN",
  "right-square-fill",
  "Field-String",
  "up-circle",
  "plus-square-fill",
  "Function",
  "transaction",
  "accountbook-fill",
  "Field-time",
  "dashboard",
  "carryout-fill",
  "GIF",
  "issuesclose",
  "calendar-fill",
  "Partition",
  "piechart",
  "calculator-fill",
  "index",
  "left-square",
  "interation-fill",
  "Storedprocedure",
  "play-square",
  "project-fill",
  "Field-Binary",
  "minus-square",
  "detail-fill",
  "Console-SQL",
  "plus-square",
  "save-fill",
  "icon-test",
  "right-square",
  "wallet-fill",
  "aim",
  "project",
  "control-fill",
  "compress",
  "wallet",
  "layout-fill",
  "expend",
  "up-square",
  "appstore-fill",
  "folder-view",
  "check-square",
  "mobile-fill",
  "file-GIF",
  "border",
  "tablet-fill",
  "group",
  "border-outer",
  "book-fill",
  "send",
  "border-top",
  "redenvelope-fill",
  "Report",
  "border-bottom",
  "safetycertificate-f",
  "View",
  "border-left",
  "propertysafety-fill",
  "shortcut",
  "border-right",
  "insurance-fill",
  "ungroup",
  "border-inner",
  "securityscan-fill",
  "border-verticle",
  "file-exclamation-fil",
  "border-horizontal",
  "file-add-fill",
  "radius-bottomleft",
  "file-fill",
  "radius-bottomright",
  "file-excel-fill",
  "radius-upleft",
  "file-markdown-fill",
  "radius-upright",
  "file-text-fill",
  "radius-setting",
  "file-ppt-fill",
  "areachart",
  "file-unknown-fill",
  "linechart",
  "file-word-fill",
  "barchart",
  "file-zip-fill",
  "pointmap",
  "file-pdf-fill",
  "container",
  "file-image-fill",
  "database",
  "diff-fill",
  "sever",
  "file-copy-fill",
  "mobile",
  "snippets-fill",
  "tablet",
  "batchfolding-fill",
  "redenvelope",
  "reconciliation-fill",
  "book",
  "folder-add-fill",
  "filedone",
  "folder-fill",
  "reconciliation",
  "folder-open-fill",
  "file-exception",
  "database-fill",
  "filesync",
  "container-fill",
  "filesearch",
  "sever-fill",
  "solution",
  "calendar-check-fill",
  "fileprotect",
  "image-fill",
  "file-add",
  "idcard-fill",
  "file-excel",
  "creditcard-fill",
  "file-exclamation",
  "fund-fill",
  "file-pdf",
  "read-fill",
  "file-image",
  "contacts-fill",
  "file-markdown",
  "delete-fill",
  "file-unknown",
  "notification-fill",
  "file-ppt",
  "flag-fill",
  "file-word",
  "moneycollect-fill",
  "file",
  "medicinebox-fill",
  "file-zip",
  "rest-fill",
  "file-text",
  "shopping-fill",
  "file-copy",
  "skin-fill",
  "snippets",
  "video-fill",
  "audit",
  "sound-fill",
  "diff",
  "bulb-fill",
  "Batchfolding",
  "bell-fill",
  "securityscan",
  "filter-fill",
  "propertysafety",
  "fire-fill",
  "safetycertificate",
  "funnelplot-fill",
  "insurance",
  "gift-fill",
  "alert",
  "hourglass-fill",
  "hourglass",
  "home-fill",
  "experiment",
  "trophy-fill",
  "trophy",
  "location-fill",
  "rest",
  "cloud-fill",
  "USB",
  "customerservice-fill",
  "skin",
  "experiment-fill",
  "bank",
  "eye-fill",
  "filter",
  "like-fill",
  "funnelplot",
  "lock-fill",
  "like",
  "unlike-fill",
  "unlike",
  "star-fill",
  "customerservice",
  "unlock-fill",
  "flag",
  "alert-fill",
  "moneycollect",
  "api-fill",
  "medicinebox",
  "highlight-fill",
  "shop",
  "phone-fill",
  "rocket",
  "edit-fill",
  "shopping",
  "pushpin-fill",
  "folder",
  "rocket-fill",
  "folder-open",
  "thunderbolt-fill",
  "folder-add",
  "tag-fill",
  "deploymentunit",
  "wrench-fill",
  "accountbook",
  "tags-fill",
  "contacts",
  "bank-fill",
  "carryout",
  "camera-fill",
  "calendar-check",
  "error-fill",
  "calendar",
  "crown-fill",
  "scan",
  "mail-fill",
  "select",
  "car-fill",
  "boxplot",
  "printer-fill",
  "build",
  "shop-fill",
  "sliders",
  "setting-fill",
  "laptop",
  "USB-fill",
  "barcode",
  "golden-fill",
  "camera",
  "build-fill",
  "cluster",
  "boxplot-fill",
  "gateway",
  "sliders-fill",
  "car",
  "alibaba",
  "printer",
  "antdesign",
  "read",
  "ant-cloud",
  "cloud-server",
  "behance",
  "cloud-upload",
  "googleplus",
  "cloud",
  "medium",
  "cloud-download",
  "google",
  "cloud-sync",
  "IE",
  "video",
  "amazon",
  "radarchart",
  "slack",
  "qrcode",
  "alipay",
  "fund",
  "taobao",
  "image",
  "zhihu",
  "mail",
  "HTML",
  "table",
  "linkedin",
  "idcard",
  "yahoo",
  "creditcard",
  "facebook",
  "heart",
  "skype",
  "block",
  "CodeSandbox",
  "error",
  "chrome",
  "star",
  "codepen",
  "gold",
  "aliwangwang",
  "heatmap",
  "apple",
  "wifi",
  "android",
  "attachment",
  "sketch",
  "edit",
  "Gitlab",
  "key",
  "dribbble",
  "api",
  "instagram",
  "disconnect",
  "reddit",
  "highlight",
  "windows",
  "monitor",
  "yuque",
  "link",
  "Youtube",
  "man",
  "Gitlab-fill",
  "percentage",
  "dropbox",
  "pushpin",
  "dingtalk",
  "phone",
  "android-fill",
  "shake",
  "apple-fill",
  "tag",
  "HTML-fill",
  "wrench",
  "windows-fill",
  "tags",
  "QQ",
  "scissor",
  "twitter",
  "mr",
  "skype-fill",
  "share",
  "weibo",
  "branches",
  "yuque-fill",
  "fork",
  "Youtube-fill",
  "shrink",
  "yahoo-fill",
  "arrawsalt",
  "wechat-fill",
  "verticalright",
  "chrome-fill",
  "verticalleft",
  "alipay-circle-fill",
  "fullscreen",
  "aliwangwang-fill",
  "fullscreen-exit",
  "behance-circle-fill",
  "doubleleft",
  "amazon-circle-fill",
  "doubleright",
  "codepen-circle-fill",
  "arrowright",
  "CodeSandbox-circle-f",
  "arrowup",
  "dropbox-circle-fill",
  "arrowleft",
  "github-fill",
  "arrowdown",
  "dribbble-circle-fill",
  "upload",
  "googleplus-circle-f",
  "colum-height",
  "medium-circle-fill",
  "vertical-align-botto",
  "QQ-circle-fill",
  "vertical-align-middl",
  "IE-circle-fill",
  "totop",
  "google-circle-fill",
  "vertical-align-top",
  "dingtalk-circle-fill",
  "download",
  "sketch-circle-fill",
  "sort-descending",
  "slack-circle-fill",
  "sort-ascending",
  "twitter-circle-fill",
  "fall",
  "taobao-circle-fill",
  "swap",
  "weibo-circle-fill",
  "stock",
  "zhihu-circle-fill",
  "rise",
  "reddit-circle-fill",
  "indent",
  "alipay-square-fill",
  "outdent",
  "dingtalk-square-fill",
  "menu",
  "CodeSandbox-square-f",
  "unorderedlist",
  "behance-square-fill",
  "orderedlist",
  "amazon-square-fill",
  "align-right",
  "codepen-square-fill",
  "align-center",
  "dribbble-square-fill",
  "align-left",
  "dropbox-square-fill",
  "pic-center",
  "facebook-fill",
  "pic-right",
  "googleplus-square-f",
  "pic-left",
  "google-square-fill",
  "bold",
  "instagram-fill",
  "font-colors",
  "IE-square-fill",
  "exclaimination",
  "medium-square-fill",
  "font-size",
  "linkedin-fill",
  "infomation",
  "QQ-square-fill",
  "line-height",
  "reddit-square-fill",
  "strikethrough",
  "twitter-square-fill",
  "underline",
  "sketch-square-fill",
  "number",
  "slack-square-fill",
  "italic",
  "taobao-square-fill",
  "code",
  "weibo-square-fill",
  "column-width",
  "zhihu-square-fill",
  "check",
  "zoomout",
  "ellipsis",
  "apartment",
  "dash",
  "audio",
  "close",
  "audio-fill",
  "enter",
  "robot",
  "line",
  "zoomin",
  "minus",
  "robot-fill",
  "question",
  "bug-fill",
  "rollback",
  "bug",
  "small-dash",
  "audiostatic",
  "pause",
  "comment",
  "bg-colors",
  "signal-fill",
  "crown",
  "verified",
  "drag",
  "shortcut-fill",
  "desktop",
  "videocameraadd",
  "gift",
  "switchuser",
  "stop",
  "whatsapp",
  "fire",
  "appstoreadd",
  "thunderbolt",
  "caret-down",
  "check-circle-fill",
  "backward",
  "left-circle-fill",
  "caret-up",
  "down-circle-fill",
  "caret-right",
  "minus-circle-fill",
  "caret-left",
  "close-circle-fill",
  "fast-backward",
  "info-circle-fill",
  "forward",
  "up-circle-fill",
  "fast-forward",
  "right-circle-fill",
  "search",
  "plus-circle-fill",
  "retweet",
  "question-circle-fill",
  "login",
  "EURO-circle-fill",
  "step-backward",
  "frown-fill",
  "step-forward",
  "copyright-circle-fil",
  "swap-right",
  "CI-circle-fill",
  "swap-left",
  "compass-fill",
  "woman",
  "Dollar-circle-fill",
  "plus",
  "poweroff-circle-fill",
  "eyeclose-fill",
  "meh-fill",
  "eye-close",
  "check-circle",
  "close-circle",
  "info-circle",
  "plus-circle",
  "play-circle",
  "question-circle",
  "time-circle",
  "timeout",
  "warning-circle",
  "sync",
  "undo",
  "redo",
  "reload",
  "reloadtime",
  "message",
  "poweroff",
  "logout",
  "setting",
  "eye",
  "location",
  "edit-square",
  "export",
  "save",
  "Import",
  "appstore",
  "close-square",
  "down-square",
  "layout",
  "control",
  "codelibrary",
  "detail",
  "calculator",
  "interation",
  "adduser",
  "deleteteam",
  "deleteuser",
  "addteam",
  "user",
  "team",
  "delete",
  "bulb",
  "bell",
  "home",
  "unlock",
  "lock",
  "notification",
  "sound",
  "right",
  "left",
  "up",
  "down",
].sort().filter((item, index, self) => self.indexOf(item) === index).filter(f => searchIcon.value ? f.indexOf(searchIcon.value) !== -1 : true ))

</script>


<style lang="scss">
</style>
